È possibile attivare / disattivare la visibilità di un elemento, utilizzando le funzioni .hide (), .show () o .toggle ()?
Come testeresti se un elemento è visibile o nascosto?
2020-12-07 21:52:13
1
2
Il prossimo
Poiché la domanda si riferisce a un singolo elemento, questo codice potrebbe essere più adatto:
// Controlla il contenuto CSS per la visualizzazione: [nessuno | blocco], ignora la visibilità: [vero | falso]
$ (elemento) .is (": visible");
// Lo stesso funziona con nascosto
$ (elemento) .is (": hidden");
È lo stesso del suggerimento di twernt, ma applicato a un singolo elemento; e corrisponde all'algoritmo consigliato nelle FAQ di jQuery.
Usiamo is () di jQuery per controllare l'elemento selezionato con un altro elemento, selettore o qualsiasi oggetto jQuery. Questo metodo attraversa gli elementi DOM per trovare una corrispondenza, che soddisfi il parametro passato. Restituirà vero se c'è una corrispondenza, altrimenti restituirà falso.
|
Puoi usare il selettore nascosto:
// Corrisponde a tutti gli elementi nascosti
$ ('elemento: nascosto')
E il selettore visibile:
// Corrisponde a tutti gli elementi visibili
$ ('elemento: visibile')
|
if ($ (elemento) .css ('display') == 'nessuno' || $ (elemento) .css ("visibilità") == "nascosto") {
// "elemento" è nascosto
}
Il metodo sopra non considera la visibilità del genitore. Per considerare anche il genitore, dovresti usare .is (": hidden") o .is (": visible").
Per esempio,
Div2
Il metodo sopra considererà div2 visibile mentre: visibile no. Ma quanto sopra potrebbe essere utile in molti casi, soprattutto quando devi scoprire se ci sono dei div di errore visibili nel genitore nascosto perché in tali condizioni: visible non funzionerà.
|
Nessuna di queste risposte risponde a quella che intendo essere la domanda, ovvero quello che stavo cercando, "Come gestisco gli elementi che hanno visibilità: nascosti?" Né: visible né: hidden gestiranno questo, poiché entrambi cercano la visualizzazione per la documentazione. Per quanto ho potuto determinare, non esiste un selettore per gestire la visibilità CSS. Ecco come l'ho risolto (selettori jQuery standard, potrebbe esserci una sintassi più condensata):
$ (". item"). each (function () {
if ($ (this) .css ("visible") == "hidden") {
// gestisce lo stato non visibile
} altro {
// gestisce lo stato visibile
}
});
|
Da Come determino lo stato di un elemento commutato?
È possibile determinare se un elemento è compresso o meno utilizzando i selettori: visibile e: nascosto.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Se stai semplicemente agendo su un elemento in base alla sua visibilità, puoi semplicemente includere: visibile o: nascosto nell'espressione del selettore. Per esempio:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Spesso, quando controlli se qualcosa è visibile o meno, andrai subito avanti e farai qualcos'altro con esso. Il concatenamento jQuery lo rende facile.
Quindi se hai un selettore e vuoi eseguire qualche azione su di esso solo se è visibile o nascosto, puoi usare filter (": visible") o filter (": hidden") seguito concatenandolo con l'azione che desideri prendere.
Quindi, invece di un'istruzione if, come questa:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Nascondi pulsante
}
O più efficiente, ma ancora più brutto:
pulsante var = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({larghezza: "toggle"}); // Nascondi pulsante
}
Puoi fare tutto in una riga:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
Il selettore: visible secondo la documentazione di jQuery:
Hanno un valore di visualizzazione CSS pari a nessuno.
Sono elementi del modulo con type = "hidden".
La loro larghezza e altezza sono impostate esplicitamente su 0.
Un elemento antenato è nascosto, quindi l'elemento non viene mostrato nella pagina.
Gli elementi con visibilità: nascosto o opacità: 0 sono considerati visibili, poiché occupano ancora spazio nel layout.
Questo è utile in alcuni casi e inutile in altri, perché se vuoi controllare se l'elemento è visibile (display! = None), ignorando la visibilità dei genitori, troverai che facendo .css ("display") == 'none 'non è solo più veloce, ma restituirà anche correttamente il controllo di visibilità.
Se vuoi controllare la visibilità invece della visualizzazione, dovresti usare: .css ("visibilità") == "hidden".
Prendi in considerazione anche le note aggiuntive di jQuery:
Poiché: visible è un'estensione jQuery e non fa parte della specifica CSS, le query che utilizzano: visible non possono trarre vantaggio dal miglioramento delle prestazioni fornito dal metodo querySelectorAll () DOM nativo. Per ottenere le migliori prestazioni quando si utilizza: visible per selezionare elementi, selezionare prima gli elementi utilizzando un selettore CSS puro, quindi utilizzare .filter (": visible").
Inoltre, se sei preoccupato per le prestazioni, dovresti controllare Ora mi vedi ... mostra / nascondi prestazioni (2010-05-04). E usa altri metodi per mostrare e nascondere gli elementi.
|
Questo funziona per me e sto usando show () e hide () per rendere il mio div nascosto / visibile:
if ($ (this) .css ('display') == 'none') {
/ * il tuo codice va qui * /
} altro {
/ * logica alternativa * /
}
|
Come funzionano la visibilità degli elementi e jQuery;
Un elemento potrebbe essere nascosto con display: nessuno,visibilità: nascosto o opacità: 0. La differenza tra questi metodi:
display: nessuno nasconde l'elemento e non occupa spazio;
visibilità: nascosto nasconde l'elemento, ma occupa comunque spazio nel layout;
opacity: 0 nasconde l'elemento come "visibilità: nascosto" e occupa ancora spazio nel layout; l'unica differenza è che l'opacità permette di rendere un elemento parzialmente trasparente;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} altro {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} altro {
$ ('. target'). show ();
}
if ($ ('. target-visibilità'). css ('visibilità') == 'nascosto') {
$ ('. target-visibilità'). css ({
visibilità: "visibile",
Schermo: ""
});
} altro {
$ ('. target-visibilità'). css ({
visibilità: "nascosto",
Schermo: ""
});
}
if ($ ('. target-visible'). css ('opacity') == "0") {
$ ('. target-visibilità'). css ({
opacità: "1",
Schermo: ""
});
} altro {
$ ('. target-visibilità'). css ({
opacità: "0",
Schermo: ""
});
}
Metodi di commutazione jQuery utili:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Puoi anche farlo usando JavaScript semplice:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
restituire vero;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibilità"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibilità")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
return false;
}
Appunti:
Funziona ovunque
Funziona per elementi nidificati
Funziona per CSS e stili in linea
Non richiede un framework
|
Vorrei usare la classe CSS .hide {display: none! Important; }.
Per nascondere / mostrare, chiamo .addClass ("hide") /. RemoveClass ("hide"). Per controllare la visibilità, utilizzo .hasClass ("hide").
È un modo semplice e chiaro per controllare / nascondere / mostrare elementi, se non si prevede di utilizzare i metodi .toggle () o .animate ().
|
Link demo
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('slow', function () {
// Animazione completata.
alert ($ ('# book'). is (": visible")); // <--- TRUE se visibile False se nascosto
});
});
Clicca qui
Fonte:
Blogger Plug n Play - Strumenti e widget jQuery: come vedere se l'elemento è nascosto o visibile utilizzando jQuery
|
Si può semplicemente usare l'attributo nascosto o visibile, come:
$ ('elemento: nascosto')
$ ('elemento: visibile')
Oppure puoi semplificare lo stesso con è come segue.
$ (elemento) .is (": visible")
|
ebdiv dovrebbe essere impostato su style = "display: none;". Funziona sia per mostrare che per nascondere:
$ (documento) .ready (function () {
$ ("# eb"). fare clic su (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Un'altra risposta che dovresti prendere in considerazione è se stai nascondendo un elemento, dovresti usare jQuery, ma invece di nasconderlo effettivamente, rimuovi l'intero elemento, ma copi il suo contenuto HTML e il tag stesso in una variabile jQuery, e poi tutto quello che devi fare è verificare se c'è un tag di questo tipo sullo schermo, usando il normale if (! $ ('# thetagname'). length).
|
Quando si prova un elemento in base a: selettore nascosto in jQuery, si dovrebbe considerare che un elemento posizionato in modo assoluto può essere riconosciuto come nascosto sebbene i loro elementi figlio siano visibili.
Questo sembra alquanto controintuitivo in primo luogo, anche se uno sguardo più attento alla documentazione di jQuery fornisce le informazioni pertinenti:
Gli elementi possono essere considerati nascosti per diversi motivi: [...] La loro larghezza e altezza sono impostate esplicitamente a 0. [...]
Quindi questo in realtà ha senso per quanto riguarda il box-model e lo stile calcolato per l'elemento. Anche se la larghezza e l'altezza non sono impostate esplicitamente a 0, possono essere impostate implicitamente.
Dai un'occhiata al seguente esempio:
console.log ($ ('. foo'). is (': hidden')); // vero
console.log ($ ('. bar'). is (': hidden')); // false
.foo {
posizione: assoluta;
sinistra: 10px;
in alto: 10px;
sfondo: # ff0000;
}
.bar {
posizione: assoluta;
sinistra: 10px;
in alto: 10px;
larghezza: 20px;
altezza: 20px;
sfondo: # 0000ff;
}
Aggiornamento per jQuery 3.x:
Con jQuery 3 il comportamento descritto cambierà! Gli elementi saranno considerati visibili se hanno delle caselle di layout, comprese quelle di larghezza e / o altezza zero.
JSFiddle con jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Lo stesso codice JavaScript avrà quindi questo output:
console.log ($ ('. foo'). is (': hidden')); // false
console.log ($ ('. bar'). is (': hidden'));// false
|
Questo potrebbe funzionare:
aspettati ($ ("# message_div"). css ("display")). toBe ("none");
|
Esempio:
$ (documento) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ("Nascosto");
}
});
|
Per verificare se non è visibile utilizzo!:
if (! $ ('# book'). is (': visible')) {
avviso ("# libro non è visibile")
}
Oppure il seguente è anche il sam, salvando il selettore jQuery in una variabile per avere prestazioni migliori quando ne hai bisogno più volte:
var $ book = $ ('# book')
if (! $ book.is (': visible')) {
avviso ("# libro non è visibile")
}
|
Usa il cambio di classe, non la modifica dello stile. . .
Usare classi designate per "nascondere" elementi è facile e anche uno dei metodi più efficienti. La commutazione di una classe "nascosta" con uno stile di visualizzazione "nessuno" funzionerà più velocemente della modifica diretta di quello stile. Ho spiegato alcuni di questi in modo abbastanza approfondito nella domanda Stack Overflow Trasformare due elementi visibili / nascosti nello stesso div.
Best practice e ottimizzazione JavaScript
Ecco un video davvero illuminante di un Google Tech Talk dell'ingegnere front-end di Google Nicholas Zakas:
Velocizza il tuo Javascript (YouTube)
|
Esempio di utilizzo del controllo visibile per adblocker è attivato:
$ (documento) .ready (function () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Disattiva adblocker."). show ();
});
"ablockercheck" è un ID bloccato dall'adblocker. Quindi controllando se è visibile, puoi rilevare se il blocco degli annunci è attivato.
|
Dopotutto, nessuno degli esempi mi va bene, quindi ho scritto il mio.
Test (nessun supporto del filtro Internet Explorer: alpha):
a) Controlla se il documento non è nascosto
b) Controlla se un elemento ha larghezza / altezza / opacità zero o display: nessuno / visibilità: nascosto negli stili in linea
c) Controlla se il centro (anche perché è più veloce del test di ogni pixel / angolo) dell'elemento non è nascosto da un altro elemento (e da tutti gli antenati, esempio: overflow: nascosto / scorrimento / un elemento sopra un altro) o dai bordi dello schermo
d) Controlla se un elemento ha larghezza / altezza / opacità zero o display: nessuno / visibilità: nascosto negli stili calcolati (tra tutti gli antenati)
Testato su
Android 4.4 (browser nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modalità documento Internet Explorer 5-11 + Internet Explorer 8 su un macchina virtuale) e Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativo = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funzione dentro (figlio, genitore) {
while (bambino) {
se (figlio === genitore) restituisce vero;
child = child.parentNode;
}
return false;
};
funzione di ritorno (elem) {
Se (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'hidden' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (relativo) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) restituisce false;
} altrimenti se (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) restituisce false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
restituire vero;
}
}) ();
Come usare:
is_visible (elem) // boolean
|
Devi controllare sia ... Visualizzazione che visibilità:
if ($ (questo) .css ("display") == "nessuno" || $ (questo) .css ("visibilità") == "nascosto") {
// L'elemento non è visibile
} altro {
// L'elemento è visibile
}
Se controlliamo $ (this) .is (": visible"), jQuery controlla automaticamente entrambe le cose.
|
Forse puoi fare qualcosa del genere
$ (documento) .ready (function () {
var visible =$ ('# elemento'). is (': visible');
if (visibile) {
avviso ("visibile");
// Codice
}
altro
{
alert ("nascosto");
}
});
Firstname
|
Controlla semplicemente la visibilità controllando un valore booleano, come:
if (this.hidden === false) {
// Il tuo codice
}
Ho usato questo codice per ogni funzione. Altrimenti puoi usare is (': visible') per controllare la visibilità di un elemento.
|
Poiché gli elementi con visibilità: nascosto o opacità: 0 sono considerati visibili, poiché consumano ancora spazio nel layout (come descritto per jQuery: selettore visibile) - possiamo verificare se l'elemento è realmente visibile in questo modo:
function isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("visibilità") == "nascosto" || $ (el) .css ('opacità') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ma cosa succede se il CSS dell'elemento è come il seguente?
.elemento{
posizione: assoluta; sinistra: -9999;
}
Quindi questa risposta alla domanda di Stack Overflow Come verificare se un elemento è fuori dallo schermo dovrebbe essere considerata.
|
È possibile creare una funzione per verificare la visibilità / gli attributi di visualizzazione al fine di valutare se l'elemento viene visualizzato o meno nell'interfaccia utente.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visible')! == 'hidden'));
}
Violino funzionante
|
Inoltre, ecco un'espressione condizionale ternaria per controllare lo stato dell'elemento e quindi per attivarlo:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' slow ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} altro {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Il prossimo
Domanda molto attiva. Guadagna 10 punti reputazione per rispondere a questa domanda. Il requisito di reputazione aiuta a proteggere questa domanda dallo spam e dalle attività di mancata risposta.
Non è la risposta che stai cercando? Sfoglia altre domande taggate javascript jquery dom visibilità o fai la tua domanda.
Fonte:
Blogger Plug n Play - Strumenti e widget jQuery: come vedere se l'elemento è nascosto o visibile utilizzando jQuery
|
Si può semplicemente usare l'attributo nascosto o visibile, come:
$ ('elemento: nascosto')
$ ('elemento: visibile')
Oppure puoi semplificare lo stesso con è come segue.
$ (elemento) .is (": visible")
|
ebdiv dovrebbe essere impostato su style = "display: none;". Funziona sia per mostrare che per nascondere:
$ (documento) .ready (function () {
$ ("# eb"). fare clic su (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Un'altra risposta che dovresti prendere in considerazione è se stai nascondendo un elemento, dovresti usare jQuery, ma invece di nasconderlo effettivamente, rimuovi l'intero elemento, ma copi il suo contenuto HTML e il tag stesso in una variabile jQuery, e poi tutto quello che devi fare è verificare se c'è un tag di questo tipo sullo schermo, usando il normale if (! $ ('# thetagname'). length).
|
Quando si prova un elemento in base a: selettore nascosto in jQuery, si dovrebbe considerare che un elemento posizionato in modo assoluto può essere riconosciuto come nascosto sebbene i loro elementi figlio siano visibili.
Questo sembra alquanto controintuitivo in primo luogo, anche se uno sguardo più attento alla documentazione di jQuery fornisce le informazioni pertinenti:
Gli elementi possono essere considerati nascosti per diversi motivi: [...] La loro larghezza e altezza sono impostate esplicitamente a 0. [...]
Quindi questo in realtà ha senso per quanto riguarda il box-model e lo stile calcolato per l'elemento. Anche se la larghezza e l'altezza non sono impostate esplicitamente a 0, possono essere impostate implicitamente.
Dai un'occhiata al seguente esempio:
console.log ($ ('. foo'). is (': hidden')); // vero
console.log ($ ('. bar'). is (': hidden')); // false
.foo {
posizione: assoluta;
sinistra: 10px;
in alto: 10px;
sfondo: # ff0000;
}
.bar {
posizione: assoluta;
sinistra: 10px;
in alto: 10px;
larghezza: 20px;
altezza: 20px;
sfondo: # 0000ff;
}
Aggiornamento per jQuery 3.x:
Con jQuery 3 il comportamento descritto cambierà! Gli elementi saranno considerati visibili se hanno delle caselle di layout, comprese quelle di larghezza e / o altezza zero.
JSFiddle con jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Lo stesso codice JavaScript avrà quindi questo output:
console.log ($ ('. foo'). is (': hidden')); // false
console.log ($ ('. bar'). is (': hidden'));// false
|
Questo potrebbe funzionare:
aspettati ($ ("# message_div"). css ("display")). toBe ("none");
|
Esempio:
$ (documento) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ("Nascosto");
}
});
|
Per verificare se non è visibile utilizzo!:
if (! $ ('# book'). is (': visible')) {
avviso ("# libro non è visibile")
}
Oppure il seguente è anche il sam, salvando il selettore jQuery in una variabile per avere prestazioni migliori quando ne hai bisogno più volte:
var $ book = $ ('# book')
if (! $ book.is (': visible')) {
avviso ("# libro non è visibile")
}
|
Usa il cambio di classe, non la modifica dello stile. . .
Usare classi designate per "nascondere" elementi è facile e anche uno dei metodi più efficienti. La commutazione di una classe "nascosta" con uno stile di visualizzazione "nessuno" funzionerà più velocemente della modifica diretta di quello stile. Ho spiegato alcuni di questi in modo abbastanza approfondito nella domanda Stack Overflow Trasformare due elementi visibili / nascosti nello stesso div.
Best practice e ottimizzazione JavaScript
Ecco un video davvero illuminante di un Google Tech Talk dell'ingegnere front-end di Google Nicholas Zakas:
Velocizza il tuo Javascript (YouTube)
|
Esempio di utilizzo del controllo visibile per adblocker è attivato:
$ (documento) .ready (function () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Disattiva adblocker."). show ();
});
"ablockercheck" è un ID bloccato dall'adblocker. Quindi controllando se è visibile, puoi rilevare se il blocco degli annunci è attivato.
|
Dopotutto, nessuno degli esempi mi va bene, quindi ho scritto il mio.
Test (nessun supporto del filtro Internet Explorer: alpha):
a) Controlla se il documento non è nascosto
b) Controlla se un elemento ha larghezza / altezza / opacità zero o display: nessuno / visibilità: nascosto negli stili in linea
c) Controlla se il centro (anche perché è più veloce del test di ogni pixel / angolo) dell'elemento non è nascosto da un altro elemento (e da tutti gli antenati, esempio: overflow: nascosto / scorrimento / un elemento sopra un altro) o dai bordi dello schermo
d) Controlla se un elemento ha larghezza / altezza / opacità zero o display: nessuno / visibilità: nascosto negli stili calcolati (tra tutti gli antenati)
Testato su
Android 4.4 (browser nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modalità documento Internet Explorer 5-11 + Internet Explorer 8 su un macchina virtuale) e Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relativo = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funzione dentro (figlio, genitore) {
while (bambino) {
se (figlio === genitore) restituisce vero;
child = child.parentNode;
}
return false;
};
funzione di ritorno (elem) {
Se (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'hidden' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (relativo) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) restituisce false;
} altrimenti se (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) restituisce false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
restituire vero;
}
}) ();
Come usare:
is_visible (elem) // boolean
|
Devi controllare sia ... Visualizzazione che visibilità:
if ($ (questo) .css ("display") == "nessuno" || $ (questo) .css ("visibilità") == "nascosto") {
// L'elemento non è visibile
} altro {
// L'elemento è visibile
}
Se controlliamo $ (this) .is (": visible"), jQuery controlla automaticamente entrambe le cose.
|
Forse puoi fare qualcosa del genere
$ (documento) .ready (function () {
var visible =$ ('# elemento'). is (': visible');
if (visibile) {
avviso ("visibile");
// Codice
}
altro
{
alert ("nascosto");
}
});
Firstname
|
Controlla semplicemente la visibilità controllando un valore booleano, come:
if (this.hidden === false) {
// Il tuo codice
}
Ho usato questo codice per ogni funzione. Altrimenti puoi usare is (': visible') per controllare la visibilità di un elemento.
|
Poiché gli elementi con visibilità: nascosto o opacità: 0 sono considerati visibili, poiché consumano ancora spazio nel layout (come descritto per jQuery: selettore visibile) - possiamo verificare se l'elemento è realmente visibile in questo modo:
function isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("visibilità") == "nascosto" || $ (el) .css ('opacità') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Ma cosa succede se il CSS dell'elemento è come il seguente?
.elemento{
posizione: assoluta; sinistra: -9999;
}
Quindi questa risposta alla domanda di Stack Overflow Come verificare se un elemento è fuori dallo schermo dovrebbe essere considerata.
|
È possibile creare una funzione per verificare la visibilità / gli attributi di visualizzazione al fine di valutare se l'elemento viene visualizzato o meno nell'interfaccia utente.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visible')! == 'hidden'));
}
Violino funzionante
|
Inoltre, ecco un'espressione condizionale ternaria per controllare lo stato dell'elemento e quindi per attivarlo:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' slow ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} altro {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Il prossimo
Domanda molto attiva. Guadagna 10 punti reputazione per rispondere a questa domanda. Il requisito di reputazione aiuta a proteggere questa domanda dallo spam e dalle attività di mancata risposta.
Non è la risposta che stai cercando? Sfoglia altre domande taggate javascript jquery dom visibilità o fai la tua domanda.